<template>
	<view>

		<!-- <view class="canvas-line">
			<view class="canvas-litem" v-for="(item,index) in list" :key="index"
				:style="{transform:'rotate('+(index * width + width / 2)+'deg)'}"></view>
		</view> -->
		<!-- <view class="canvas-list">
			<view class="canvas-item"
				:style="{transform: 'rotate('+(index * width)+'deg)', zIndex:index, }"
				v-for="(iteml,index) in list" :key="index">
				<view class="canvas-item-text" :style="'transform:rotate('+(index )+')'">
					<text class="b" style="font-size: 32upx;">{{iteml.name}}</text>
					<text class="icon-awrad iconfont " :class="iteml.icon"></text>
				</view>
			</view>
		</view> -->
		<!-- <view v-for="(item,index) in list" :key="index"
			style="width: 300rpx;height: 2rpx;background-color: #007AFF;margin-top: 200rpx;transform-origin:left top;position: absolute;"
			:style="{transform: 'rotate('+(width*index)+'deg)'}"></view> -->
		<!-- <view style="width: 750rpx;height: 700rpx;background-color: #ccc;margin-top: 100rpx;margin-left: 0rpx;"
			:animation="animationData">
			<view v-for="(item,index) in list" :key="index"
				style="width: 300rpx;height: 2rpx;background-color: #007AFF;margin-top: 400rpx;transform-origin:right center;position: absolute;"
				:style="{transform: 'rotate('+(width*index)+'deg)'}">
				<view style="transform: rotate(-120deg);margin-left: -610rpx;margin-top: -230rpx;">
					{{item.name}}
				</view>

			</view>
		</view> -->



		<!-- <view  :animation="animationData" class="animat" ref="test"> </view>
		<view :animation="animationData" style="background:red;height:100rpx;width:100rpx"></view> -->
		<view style="display: flex;justify-content: space-around;">
			<view class="block" :style="{animationName: control}"></view>
			<view class="block" :style="{animationName: control}"></view>
		</view>
		<!-- <view class="block"></view> -->
		<view class="block_1"> </view>
		<view class="block_2"> </view>
		<!-- <button type="default" @click="move">按钮</button> -->
		<button type="default" @click="control1">按钮</button>
	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				control:'',
				num:0,
				width: 60,
				animationData: {},
				list: [{
						name: "5折",
						value: "5",
						icon: 'icondazhe text-danger',
					},
					{
						name: "6折",
						value: "6",
						icon: 'icondazhe text-danger',
					},
					{
						name: "7折",
						value: "7",
						icon: 'icondazhe text-danger',
					},
					{
						"name": "8折",
						"value": "8",
						icon: 'icondazhe text-danger',
					},
					{
						"name": "9折",
						"value": "9",
						icon: 'icondazhe text-danger',
					},
					{
						"name": "感谢参与",
						"value": "10",
						icon: 'iconfangqi1 text-master',
						isNoPrize: true, // 是否未中奖
					},
				],
			}
		},
		onShow: function() {

		},
		methods: {
			control1(){
				if(this.num==0){
					this.control="example"
					this.num=1
				}else if(this.num==1){
					this.control=""
					this.num=0
				}
				
				
			},
			anni(index, duration) {
				//中奖index
				var list = this.list;
				// var awardIndex = 1 || Math.round(Math.random() * (awardsNum.length - 1)); //随机数
				var runNum = 4; //旋转8周

				// 旋转角度
				this.runDeg = this.runDeg || 0;
				this.runDeg = this.runDeg + (360 - this.runDeg % 360) + (360 * runNum - index * (360 / list.length)) + 1

				var animation = uni.createAnimation({
					duration: duration,
					timingFunction: "ease"
				})

				// this.animation = animation

				animation.rotate(this.runDeg).step()
				this.animationData = animation.export()
				// setTimeout(function() {
				//   animation.translate(30).step()
				//   this.animationData = animation.export()
				// }.bind(this), 1000)

			},
			move() {
				let index = 3,
					duration = 4000
				this.anni(index, duration)
			}
		}
	}
</script>

<style>
	.block {
		margin: 100rpx;
		width: 200rpx;
		height: 200rpx;
		background-color: #007AFF;
		
		/* 将动画绑定在express */
		animation-name: example;
		
		/* 动画开始到结束的时间 */
		animation-duration: 5s;
		
		/* 控制动画运行的次数.infinite一直持续播放 */
		animation-iteration-count: infinite;
		
		/* 反向或交替运行动画,
			normal - 动画正常播放（向前）。默认值
			reverse - 动画以反方向播放（向后）
			alternate - 动画先向前播放，然后向后
			alternate-reverse - 动画先向后播放，然后向前 */
		animation-direction: alternate;
		
		/* 指定动画的速度曲线
		ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
		linear - 规定从开始到结束的速度相同的动画
		ease-in - 规定慢速开始的动画
		ease-out - 规定慢速结束的动画
		ease-in-out - 指定开始和结束较慢的动画
		cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值 */
		animation-timing-function: linear;
		
		/* 动画停留在最后一个关键帧位置
		none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
		forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
		backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
		both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。 */
		animation-fill-mode: none;
	}

	@keyframes example {
		0% {
			background-color: red;
			left: 0rpx;
			top: 0rpx;
		}

		25% {
			background-color: yellow;
			left: 400rpx;
			top: 0rpx;
		}

		50% {
			background-color: blue;
			left: 400rpx;
			top: 400rpx;
		}

		75% {
			background-color: green;
			left: 0rpx;
			top: 400rpx;
		}

		100% {
			background-color: red;
			left: 0rpx;
			top: 0rpx;
			transform: rotate(360deg);
		}
	}

	.block_1 {
		width: 200rpx;
		height: 200rpx;
		background-color: red;
		position: relative;
		animation-name: example1;
		animation-duration: 5s;
		animation-timing-function: linear;
		animation-delay: 2s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}

	@keyframes example1 {
		0% {
			background-color: red;
			left: 0rpx;
			top: 0rpx;
		}

		25% {
			background-color: pink;
			left: 400rpx;
			top: 0rpx;
		}

		50% {
			background-color: blue;
			left: 400rpx;
			top: 400rpx;
		}

		75% {
			background-color: green;
			left: 0rpx;
			top: 400rpx;
		}

		100% {
			background-color: red;
			left: 0rpx;
			top: 0rpx;
			transform: rotate(360deg);
		}
	}

	.block_2 {
		width: 200rpx;
		height: 200rpx;
		background-color: red;
		position: relative;
		animation-name: example2;
		animation-duration: 3s;
		animation-timing-function: linear;
		animation-delay: 2s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}

	@keyframes example2 {
		0% {
			background-color: yellow;
			left: 550rpx;
			top: 0rpx;
		}

		25% {
			background-color: red;
			left: 0rpx;
			top: 0rpx;
		}

		50% {
			background-color: blue;
			left: 550rpx;
			top: 550rpx;
		}

		75% {
			background-color: green;
			left: 0rpx;
			top: 550rpx;
		}

		100% {
			background-color: red;
			left: 0rpx;
			top: 0rpx;
		}
	}

	.animat {
		width: 200rpx;
		height: 300rpx;
		background-color: #126854;
		margin: 80rpx 150rpx;
	}

	/* 测试 */
	.test {
		width: 300rpx;
		height: 200rpx;
		/* background-color: #007AFF; */
		margin-top: 400rpx;
		margin-left: 200rpx;
		/* transform-origin: left top; */
		/* position: absolute; */


	}

	/* 分隔线 */
	.canvas-line {
		position: absolute;
		left: 0;
		top: 0;
		width: inherit;
		height: inherit;
		z-index: 99;
	}

	.canvas-litem {
		position: absolute;
		left: 300upx;
		top: 0;
		width: 3upx;
		height: 300upx;
		background-color: rgba(228, 55, 14, 0.4);
		overflow: hidden;
		-webkit-transform-origin: 50% 300upx;
		transform-origin: 50% 300upx;
	}

	.canvas-list {
		position: absolute;
		left: 0;
		top: 0;
		width: inherit;
		height: inherit;
		z-index: 9999;
	}

	.canvas-item {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		color: #e4370e;
		/* text-shadow: 0 1upx 1upx rgba(255, 255, 255, 0.6); */
	}

	.canvas-item-text {
		position: relative;
		display: block;
		padding-top: 46upx;
		margin: 0 auto;
		text-align: center;
		-webkit-transform-origin: 50% 300upx;
		transform-origin: 50% 300upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #FB778B;
	}

	.canvas-item-text text {
		font-size: 30upx;
	}
</style>
